<template>
    <!-- 收获地址 -->
    <van-contact-card type="edit" :name="`${address.name} ${address.region_text}`" :tel="address.tel" v-if="address" @click="AddressSelect"  />
    <van-contact-card type="add" v-else @click="AddressAdd"  />
  
    <!-- 商品卡片 -->
    <van-card
      v-if="product"
      :title="product.name"
      :thumb="product.thumbs_text"
      @click-thumb="toProductInfo(item.id)"
    >
      <template #title>
        <div class="title">{{product.name}}</div>
      </template>
  
      <!-- 卡片的插槽部分 -->
      <template #desc v-if="attribute.length > 0">
        <van-tag v-for="(attr,index) in attribute" :key="index" class="tag" type="primary">{{attr.value}} {{attr.price > 0 ? `￥${attr.price}` : ''}}</van-tag>
      </template>
      <template #desc v-else>
        <van-tag class="tag" type="danger">无规格数据</van-tag>
      </template>
  
      <template #tags>
        <div class="price">拼团价格：￥{{product.team}}</div>
      </template>
    </van-card>
  
    <van-cell title="支付方式" :value="PayActive.text" is-link @click="PayShow = true" />
  
    <!--订单备注 -->
    <van-field 
      v-model="remark"
      rows="2"
      autosize
      label="订单备注"
      type="textarea"
      maxlength="120"
      placeholder="请输入订单备注"
      show-word-limit
    />
  
  
    <!-- 提交动作栏 -->
    <van-submit-bar text-align="left" :price="total" button-text="确认拼团" @submit="submit" />
  
    <!-- 支付方式的选择器 -->
    <van-popup v-model:show="PayShow" position="bottom">
      <van-picker
        title="选择支付方式"
        :columns="PayList"
        @cancel="PayShow = false"
        @confirm="PayConfirm"
      />
    </van-popup>
  
  </template>
  
  <script setup>
    const {proxy} = getCurrentInstance()
  
    // 获取商品ID 和 选择的规格
    let proid = proxy.$route.query.proid ? proxy.$route.query.proid : 0
    let relationids = proxy.$cookies.get('relationids') ? proxy.$cookies.get('relationids') : ''
    let teamid = proxy.$cookies.get('teamid') ? proxy.$cookies.get('teamid') : 0
  
    //响应式数据
    let product = ref(null)
    let address = ref(null)
    let remark = ref('')
    let attribute = ref([])
  
    //支付方式
    let PayShow = ref(false)
    let PayActive = ref({text: '余额支付', value: 'money'})
    let PayList = ref([
      {text: '余额支付', value: 'money'},
      {text: '微信支付', value: 'wx'},
      {text: '支付宝', value: 'zfb'},
    ])
  
  
    //生命周期
    onBeforeMount(() => {
      ProInfo()
      AttrInfo()
      AddressInfo()
    })
  
    //合计的价格
    let total = computed(() => {
      var team = 0
  
      if(product.value)
      {
        team = product.value.team ? parseFloat(product.value.team) : 0
      }
  
      if(attribute.value.length > 0)
      {
        attribute.value.map((item) => {
          team += parseFloat(item.price)
        })
      }
  
      return parseFloat(team*100)
    })
  
    //商品数据
    const ProInfo = async () =>
    {
      //组装数据
      var params = {
        busid: proxy.$business.value.id,
        proid
      }
  
      var result = await proxy.$POST({
        url: '/product/info',
        params
      })
  
      if(result.code == 0)
      {
        proxy.$fail(result.msg)
        return false
      }
  
      product.value = result.data.product
    }
  
    //商品规格数据
    const AttrInfo = async () =>
    {
      //判断是否有规格的数据ID
      if(!relationids) return false
  
      var result = await proxy.$POST({
        url: '/product/attribute',
        params: {relationids}
      })
  
      if(result.code == 0) return false
  
      attribute.value = result.data
    }
  
    //返回收获地址的方法
    const AddressInfo = async () =>
    {
  
      //先判断cookie当中是否存在缓存,如果有缓存就拿缓存的数据，没有缓存就接口请求
      var cached = proxy.$cookies.get('address') ? proxy.$cookies.get('address') : null
  
      if(cached)
      {
        address.value = cached
      }else
      {
        var result = await proxy.$POST({
          url: '/address/selected',
          params: {busid: proxy.$business.value.id}
        })
  
        if(result.code == 0)
        {
          proxy.$fail(result.msg)
          return false
        }
  
        address.value = result.data
      }
    }
  
    //切换收获地址
    const AddressSelect = () => 
    {
      proxy.$router.push({path: '/address/index', query: {action: 'select'}})
    }
  
    //添加收获地址
    const AddressAdd = () => 
    {
      proxy.$router.push('/address/add')
    }
  
    //跳转到商品详情界面
    const toProductInfo = proid => proxy.$router.push({path: '/product/info', query: {proid}})
  
    //支付方式
    const PayConfirm = (	{selectedOptions}) =>
    {
      PayShow.value = false
      PayActive.value = selectedOptions[0]
    }
  
    //提交订单
    const submit = async () =>
    {
      //组装数据
      var params = {
        busid: proxy.$business.value.id,
        addrid: address.value.id,
        relationids: relationids,
        remark: remark.value,
        pay:PayActive.value.value,
        teamid: teamid,
        proid: proid
      }
  
  
      var result = await proxy.$POST({
        url: '/teamwork/add',
        params
      })
  
      if(result.code == 0)
      {
        proxy.$fail(result.msg)
        return false
      }
  
      proxy.$success({
        message: result.msg,
        onClose: () => 
        {
          // proxy.$router.push(result.url)
          proxy.$cookies.remove('teamid');
          proxy.$router.push('/team/index')
          return false
        }
      })
    }
  </script>
  